<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM操作组件</title>
		<style type="text/css">
			body{
				background: url(2.jpg) no-repeat;
			}
			#login{
				width: 320px;
				height: 250px;
				background-color:lightgrey;
				border: 1px solid #ADD8E6;
				box-shadow: 10px 10px 10px gainsboro;
				position: absolute;
				left:300px;
				top:5px;
				padding: 20px 100px 20px 20px;
				border-radius: 20px;
				margin-top: 300px;
				margin-left: 300px;
			}
			form{
				font-size: 20px;
				margin-top: 20px;
				margin-left: 60px;
				float: right;
			}
			input:focus{
				border:1px solid red;
			}
			input{
				width: 300px;
				height: 30px;
			    border:1px solid gray;
				font-size: 14px;
				margin-top: 3px;
				margin-bottom: 3px;
				border-radius: 10px;
			}
			button{
				width: 50px;
				height: 30px;
				margin-left: 130px;
				margin-top: 10px;
				margin-bottom: 5px;
				border-radius: 10px;
			}
			button:active{
				background-color:skyblue;
				}
		</style>
	</head>
	<body>
			<div id="login">
				<img src="1.png"  style="width: 245px;"/>
			<form>
				<label for="username">用户名</label>
				<input type="text" id="username" placeholder="请输入用户名" /><br />
				<label for="password">密&nbsp;&nbsp;&nbsp;码</label>
				<input type="password" id="password" placeholder="请输入密码" /><br />
				<button onclick="login()">登录</button>
			</form>
		</div>
		<script>
			function login(){
				var username=document.getElementById('username').value;
				var password=document.getElementById('password').value;
				alert(username+" 登录成功  "+password)
				}
		</script>
	</body>
</html>
